<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>快复活星野爱</title> 
		<script>
		// 安全增强版密码验证方案
		function login() {
		    // 获取输入元素
		    const username = document.getElementById('username').value.trim()
		    const password = document.getElementById('password').value.trim()
		
		    // 模拟后端真实密码验证（✨可替换为实际验证逻辑）
		    const authData = {
		        validUser: '13074792816',    // 预设账号
		        validPass: 'Czz041217',    // 预设密码
		        redirectUrl: '将军的星野爱（活）.html' // 跳转目标页
		    }
		
		    // 视觉反馈处理
		    if (!username || !password) {
		        showError('请填写完整登录信息') // 空值检测
		        return
		    }
		
		    if (username === authData.validUser && password === authData.validPass) {
		        // 🌟登录成功流程
		        // 添加跳转过渡效果
		        document.body.style.opacity = 0
		        setTimeout(() => {
		            window.location.href = authData.redirectUrl
		        }, 500) // 0.5秒渐变跳转
		    } else {
		        // 🔐登录失败处理
		        showError('认证失败，请检查输入', 1500) // 延时自动清除
		        addShakeEffect() // 添加动画反馈
		    }
		}
		
		// 错误提示功能
		function showError(msg, duration = 3000) {
		    let errorBox = document.getElementById('error-msg')
		    if (!errorBox) {
		        errorBox = document.createElement('div')
		        errorBox.id = 'error-msg'
		        document.querySelector('.login-form').appendChild(errorBox)
		    }
		    errorBox.textContent = msg
		    setTimeout(() => errorBox.remove(), duration)
		}
		
		// 动态抖动特效
		function addShakeEffect() {
		    const form = document.querySelector('.login-form')
		    form.style.transform = 'translateX(10px)'
		    setTimeout(() => form.style.transform = 'translateX(-10px)', 100)
		    setTimeout(() => form.style.transform = 'none', 200)
		}
		</script>
		<style>
			/* 错误提示样式 */
			#error-msg {
			    color: #ff5555;
			    font-size: 14px;
			    padding: 8px;
			    background: rgba(0,0,0,0.5);
			    border-radius: 4px;
			    margin-top: 10px
			}
			
			/* 输入框动态聚焦效果 */
			input:focus {
			    outline: 2px solid #6a6a6a;
			    box-shadow: 0 0 10px rgba(106, 106, 106, 0.5)
			}
			
			/* 页面跳转过渡 */
			body {
			    transition: opacity 0.5s ease;
			}
			
			body{
				margin: 0;
				background-image: url(img/星野爱gg.png);
				background-size: cover;
				background-repeat: no-repeat;
				background-attachment: fixed;
				height: 100vh;
			}
			.账号密码{
				position: absolute;
				left: 49.7%;
				top: 52%;
				transform: translate(-50%,-50%);
				font-size: 22px;
				display: block;
				margin-bottom: 10px;
				color: #e0e0e0;
				font-family: '幼圆';
				font-weight: 900;
			}
			input[type="text"], 
			input[type="password"] {
			    font-size: 20px;
			    height: 20px;
			}
			input[type="submit"], 
			input[type="reset"] {
				font-size: 18px;
			    padding: 12px 30px;
			    margin-top: 20px;
			}
			p{
				text-align:center;
				position: absolute;
				left: 50%;
				top: 260px;
				transform: translate(-50%,-50%);
				font-size: 40px;
				display: block;
				margin-bottom: 10px;
				color: #cf0003;
				font-family: '幼圆';
				font-weight: 900;
				}
			.箭头1{
				width: 350px;
				height: 60px;
				background-color:#e30f7b;
				border-radius: 80px 80px 80px 80px;
				margin: 200px auto ;
				filter: drop-shadow(0 0 60px #ff003b);
				transform: rotate(180deg);
				position: relative;
				left: -500px;
				top: 280px;
				animation: arrow1 1s linear infinite;
				z-index: 1000;
			}
			.箭头1:after{
				content: "";
				display: block;
				width: 150px;
				height: 50px;
				background-color:#e30f7b;
				border-radius: 80px 80px 80px 80px;
				transform: rotate(30deg);
				position: relative;
				top: -15px;
				left: -3px;
				}
			.箭头1:before{
				content: "";
				display: block;
				width: 150px;
				height: 50px;
				background-color:#e30f7b;
				border-radius: 80px 80px 80px 80px;
				transform: rotate(150deg);
				position: relative;
				top: -25px;
				left: -3px;
				}
			.箭头2{
				width: 350px;
				height: 60px;
				background-color:#e30f7b;
				border-radius: 80px 80px 80px 80px;
				margin: 200px auto ;
				filter: drop-shadow(0 0 60px #ff003b);
				transform: rotate(210deg);
				position: relative;
				left: -400px;
				top: -200px;
				animation: arrow2 1s linear infinite;
			}
			.箭头2:after{
				content: "";
				display: block;
				width: 150px;
				height: 50px;
				background-color:#e30f7b;
				border-radius: 80px 80px 80px 80px;
				transform: rotate(30deg);
				position: relative;
				top: -15px;
				left: -3px;
				}
			.箭头2:before{
				content: "";
				display: block;
				width: 150px;
				height: 50px;
				background-color:#e30f7b;
				border-radius: 80px 80px 80px 80px;
				transform: rotate(150deg);
				position: relative;
				top: -25px;
				left: -3px;
				}
			.箭头3{
				width: 350px;
				height: 60px;
				background-color:#e30f7b;
				border-radius: 80px 80px 80px 80px;
				margin: 200px auto ;
				filter: drop-shadow(0 0 60px #ff003b);
				transform: rotate(150deg);
				position: relative;
				left: -400px;
				top: -21px;
				animation: arrow3 1s linear infinite;
			}
			.箭头3:after{
				content: "";
				display: block;
				width: 150px;
				height: 50px;
				background-color:#e30f7b;
				border-radius: 80px 80px 80px 80px;
				transform: rotate(30deg);
				position: relative;
				top: -15px;
				left: -3px;
				}
			.箭头3:before{
				content: "";
				display: block;
				width: 150px;
				height: 50px;
				background-color:#e30f7b;
				border-radius: 80px 80px 80px 80px;
				transform: rotate(150deg);
				position: relative;
				top: -25px;
				left: -3px;
				}
			.箭头4{
				width: 350px;
				height: 60px;
				background-color:#e30f7b;
				border-radius: 80px 80px 80px 80px;
				margin: 200px auto ;
				filter: drop-shadow(0 0 60px #ff003b);
				transform: rotate(-30deg);
				position: relative;
				top: -720px;
				left: 383px;
				animation: arrow4 1s linear infinite;
			}
			.箭头4:after{
				content: "";
				display: block;
				width: 150px;
				height: 50px;
				background-color:#e30f7b;
				border-radius: 80px 80px 80px 80px;
				transform: rotate(30deg);
				position: relative;
				top: -15px;
				left: -3px;
				}
			.箭头4:before{
				content: "";
				display: block;
				width: 150px;
				height: 50px;
				background-color:#e30f7b;
				border-radius: 80px 80px 80px 80px;
				transform: rotate(150deg);
				position: relative;
				top: -25px;
				left: -3px;
				}
			.箭头5{
				width: 350px;
				height: 60px;
				background-color:#e30f7b;
				border-radius: 80px 80px 80px 80px;
				margin: 200px auto ;
				filter: drop-shadow(0 0 60px #ff003b);
				transform: rotate(0deg);
				position: relative;
				top: -760px;
				left: 483px;
				animation: arrow5 1s linear infinite;
			}
			.箭头5:after{
				content: "";
				display: block;
				width: 150px;
				height: 50px;
				background-color:#e30f7b;
				border-radius: 80px 80px 80px 80px;
				transform: rotate(30deg);
				position: relative;
				top: -15px;
				left: -3px;
				}
			.箭头5:before{
				content: "";
				display: block;
				width: 150px;
				height: 50px;
				background-color:#e30f7b;
				border-radius: 80px 80px 80px 80px;
				transform: rotate(150deg);
				position: relative;
				top: -25px;
				left: -3px;
				}
			.箭头6{
				width: 350px;
				height: 60px;
				background-color:#e30f7b;
				border-radius: 80px 80px 80px 80px;
				margin: 200px auto ;
				filter: drop-shadow(0 0 60px #ff003b);
				transform: rotate(30deg);
				position: relative;
				top: -800px;
				left:383px;
				animation: arrow6 1s linear infinite;
			}
			.箭头6:after{
				content: "";
				display: block;
				width: 150px;
				height: 50px;
				background-color:#e30f7b;
				border-radius: 80px 80px 80px 80px;
				transform: rotate(30deg);
				position: relative;
				top: -15px;
				left: -3px;
				}
			.箭头6:before{
				content: "";
				display: block;
				width: 150px;
				height: 50px;
				background-color:#e30f7b;
				border-radius: 80px 80px 80px 80px;
				transform: rotate(150deg);
				position: relative;
				top: -25px;
				left: -3px;
				}
			@keyframes arrow1{
				0%{
					transform: rotate(180deg) scale(1);
				}
				5%{
					transform: rotate(180deg) scale(1.05);
				}
				10%{
					transform: rotate(180deg) scale(1.1);
				}
				15%{
					transform: rotate(180deg) scale(1.15);
				}
				20%{
					transform: rotate(180deg) scale(1.2);
				}
				25%{
					transform: rotate(180deg) scale(1.25);
				}
				30%{
					transform: rotate(180deg) scale(1.2);
				}
				35%{
					transform: rotate(180deg) scale(1.15);
				}
				40%{
					transform: rotate(180deg) scale(1.1);
				}
				45%{
					transform: rotate(180deg) scale(1.05);
				}
				50%{
					transform: rotate(180deg) scale(1);
				}
				55%{
					transform: rotate(180deg) scale(.95);
				}
				60%{
					transform: rotate(180deg) scale(.9);
				}
				65%{
					transform: rotate(180deg) scale(.85);
				}
				70%{
					transform: rotate(180deg) scale(.8);
				}
				75%{
					transform: rotate(180deg) scale(.75);
				}
				80%{
					transform: rotate(180deg) scale(.8);
				}
				85%{
					transform: rotate(180deg) scale(.85);
				}
				90%{
					transform: rotate(180deg) scale(.9);
				}
				95%{
					transform: rotate(180deg) scale(.95);
				}
				100%{
					transform: rotate(180deg) scale(1);
				}
				}
			@keyframes arrow2{
				0%{
					transform: rotate(210deg) scale(1);
				}
				5%{
					transform: rotate(210deg) scale(1.05);
				}
				10%{
					transform: rotate(210deg) scale(1.1);
				}
				15%{
					transform: rotate(210deg) scale(1.15);
				}
				20%{
					transform: rotate(210deg) scale(1.2);
				}
				25%{
					transform: rotate(210deg) scale(1.25);
				}
				30%{
					transform: rotate(210deg) scale(1.2);
				}
				35%{
					transform: rotate(210deg) scale(1.15);
				}
				40%{
					transform: rotate(210deg) scale(1.1);
				}
				45%{
					transform: rotate(210deg) scale(1.05);
				}
				50%{
					transform: rotate(210deg) scale(1);
				}
				55%{
					transform: rotate(210deg) scale(.95);
				}
				60%{
					transform: rotate(210deg) scale(.9);
				}
				65%{
					transform: rotate(210deg) scale(.85);
				}
				70%{
					transform: rotate(210deg) scale(.8);
				}
				75%{
					transform: rotate(210deg) scale(.75);
				}
				80%{
					transform: rotate(210deg) scale(.8);
				}
				85%{
					transform: rotate(210deg) scale(.85);
				}
				90%{
					transform: rotate(210deg) scale(.9);
				}
				95%{
					transform: rotate(210deg) scale(.95);
				}
				100%{
					transform: rotate(210deg) scale(1);
				}
				}
			@keyframes arrow3{
				0%{
					transform: rotate(150deg) scale(1);
				}
				5%{
					transform: rotate(150deg) scale(1.05);
				}
				10%{
					transform: rotate(150deg) scale(1.1);
				}
				15%{
					transform: rotate(150deg) scale(1.15);
				}
				20%{
					transform: rotate(150deg) scale(1.2);
				}
				25%{
					transform: rotate(150deg) scale(1.25);
				}
				30%{
					transform: rotate(150deg) scale(1.2);
				}
				35%{
					transform: rotate(150deg) scale(1.15);
				}
				40%{
					transform: rotate(150deg) scale(1.1);
				}
				45%{
					transform: rotate(150deg) scale(1.05);
				}
				50%{
					transform: rotate(150deg) scale(1);
				}
				55%{
					transform: rotate(150deg) scale(.95);
				}
				60%{
					transform: rotate(150deg) scale(.9);
				}
				65%{
					transform: rotate(150deg) scale(.85);
				}
				70%{
					transform: rotate(150deg) scale(.8);
				}
				75%{
					transform: rotate(150deg) scale(.75);
				}
				80%{
					transform: rotate(150deg) scale(.8);
				}
				85%{
					transform: rotate(150deg) scale(.85);
				}
				90%{
					transform: rotate(150deg) scale(.9);
				}
				95%{
					transform: rotate(150deg) scale(.95);
				}
				100%{
					transform: rotate(150deg) scale(1);
				}
				}
			@keyframes arrow4{
				0%{
					transform: rotate(-30deg) scale(1);
				}
				5%{
					transform: rotate(-30deg) scale(1.05);
				}
				10%{
					transform: rotate(-30deg) scale(1.1);
				}
				15%{
					transform: rotate(-30deg) scale(1.15);
				}
				20%{
					transform: rotate(-30deg) scale(1.2);
				}
				25%{
					transform: rotate(-30deg) scale(1.25);
				}
				30%{
					transform: rotate(-30deg) scale(1.2);
				}
				35%{
					transform: rotate(-30deg) scale(1.15);
				}
				40%{
					transform: rotate(-30deg) scale(1.1);
				}
				45%{
					transform: rotate(-30deg) scale(1.05);
				}
				50%{
					transform: rotate(-30deg) scale(1);
				}
				55%{
					transform: rotate(-30deg) scale(.95);
				}
				60%{
					transform: rotate(-30deg) scale(.9);
				}
				65%{
					transform: rotate(-30deg) scale(.85);
				}
				70%{
					transform: rotate(-30deg) scale(.8);
				}
				75%{
					transform: rotate(-30deg) scale(.75);
				}
				80%{
					transform: rotate(-30deg) scale(.8);
				}
				85%{
					transform: rotate(-30deg) scale(.85);
				}
				90%{
					transform: rotate(-30deg) scale(.9);
				}
				95%{
					transform: rotate(-30deg) scale(.95);
				}
				100%{
					transform: rotate(-30deg) scale(1);
				}
				}
			@keyframes arrow5{
				0%{
					transform: rotate(0deg) scale(1);
				}
				5%{
					transform: rotate(0deg) scale(1.05);
				}
				10%{
					transform: rotate(0deg) scale(1.1);
				}
				15%{
					transform: rotate(0deg) scale(1.15);
				}
				20%{
					transform: rotate(0deg) scale(1.2);
				}
				25%{
					transform: rotate(0deg) scale(1.25);
				}
				30%{
					transform: rotate(0deg) scale(1.2);
				}
				35%{
					transform: rotate(0deg) scale(1.15);
				}
				40%{
					transform: rotate(0deg) scale(1.1);
				}
				45%{
					transform: rotate(0deg) scale(1.05);
				}
				50%{
					transform: rotate(0deg) scale(1);
				}
				55%{
					transform: rotate(0deg) scale(.95);
				}
				60%{
					transform: rotate(0deg) scale(.9);
				}
				65%{
					transform: rotate(0deg) scale(.85);
				}
				70%{
					transform: rotate(0deg) scale(.8);
				}
				75%{
					transform: rotate(0deg) scale(.75);
				}
				80%{
					transform: rotate(0deg) scale(.8);
				}
				85%{
					transform: rotate(0deg) scale(.85);
				}
				90%{
					transform: rotate(0deg) scale(.9);
				}
				95%{
					transform: rotate(0deg) scale(.95);
				}
				100%{
					transform: rotate(0deg) scale(1);
				}
				}
			@keyframes arrow6{
				0%{
					transform: rotate(30deg) scale(1);
				}
				5%{
					transform: rotate(30deg) scale(1.05);
				}
				10%{
					transform: rotate(30deg) scale(1.1);
				}
				15%{
					transform: rotate(30deg) scale(1.15);
				}
				20%{
					transform: rotate(30deg) scale(1.2);
				}
				25%{
					transform: rotate(30deg) scale(1.25);
				}
				30%{
					transform: rotate(30deg) scale(1.2);
				}
				35%{
					transform: rotate(30deg) scale(1.15);
				}
				40%{
					transform: rotate(30deg) scale(1.1);
				}
				45%{
					transform: rotate(30deg) scale(1.05);
				}
				50%{
					transform: rotate(30deg) scale(1);
				}
				55%{
					transform: rotate(30deg) scale(.95);
				}
				60%{
					transform: rotate(30deg) scale(.9);
				}
				65%{
					transform: rotate(30deg) scale(.85);
				}
				70%{
					transform: rotate(30deg) scale(.8);
				}
				75%{
					transform: rotate(30deg) scale(.75);
				}
				80%{
					transform: rotate(30deg) scale(.8);
				}
				85%{
					transform: rotate(30deg) scale(.85);
				}
				90%{
					transform: rotate(30deg) scale(.9);
				}
				95%{
					transform: rotate(30deg) scale(.95);
				}
				100%{
					transform: rotate(30deg) scale(1);
				}
				}
		</style>
	</head>
	<body>
		<div class="账号密码">
		 <div class="login-form" style="position: relative; max-width: 300px; margin: 100px auto;">
			<div class="input-group">
				<input 
					type="text" 
					id="username" 
					placeholder="账号" 
					style="
						width: 89%;
						padding: 12px;
						margin: 8px 0;
						border: 2px solid #6a6a6a;
						border-radius: 4px;
						background: rgba(255,255,255,0.9);
						font-family: '软圆', sans-serif;"
				>
		    </div>
		    <div class="input-group">
		        <input 
		            type="password" 
		            id="password" 
		            placeholder="密码" 
		            style="
		                width: 89%;
		                padding: 12px;
		                margin: 8px 0 20px;
		                border: 2px solid #6a6a6a;
		                border-radius: 4px;
		                background: rgba(255,255,255,0.9);
		                font-family: '软圆', sans-serif;
		                letter-spacing: 1px;
		            "
		        >
		    </div>
		     <div class="button-group" style="display: flex; gap: 10px;">
		        <button 
		            type="submit" 
		            onclick="login()" 
		            style="
		                flex: 1;
		                padding: 12px;
		                background: #5c5c5c;
		                color: white;
		                border: none;
		                border-radius: 4px;
		                cursor: pointer;
		                transition: transform 0.2s;
						font-family: '软圆', sans-serif;"
		                "
		        >
		                登录
		        </button>
		        <button 
		            type="reset" 
		            style="
		                flex: 1;
		                padding: 12px;
		                background: rgba(255,255,255,0.8);
	                    border: 2px solid #6a6a6a;
	                    border-radius: 4px;
						cursor: pointer;
		                transition: transform 0.2s;
						font-family: '软圆', sans-serif;"
		            "
		        >
		                清空
		        </button>
		    </div>
		 </div>
		</div>
		<div class="箭头1"></div>
		<div class="箭头2"></div>
		<div class="箭头3"></div>
		<div class="箭头4"></div>
		<div class="箭头5"></div>
		<div class="箭头6"></div>
		<p>
			星野爱死了
		<br />快登陆账号拯救她
		</p>
		
	</body>
</html>
